<template>
  <div class="card position-re">
    <!-- 卡内 -->
    <div class="innerCard" id="innerCard" :style="backgroundStyle">
      <!-- 卡头 -->
      <div
        style="top: 16px; left: 10px"
        class="navbar position-ab flex"
        :style="navbarStyle"
      >
        <!-- 卡名 -->
        <div ref="card_name" class="card_name">
          {{ cardDetail.name }}
        </div>
        <!-- 消耗 -->
        <div ref="card_cost" class="card_cost">
          <img
            class="cost_img"
            v-for="(cost, index) in costList"
            :key="index"
            :src="getImagePath(cost)"
            alt=""
          />
        </div>
      </div>
      <!-- 卡腰 -->
      <div style="top: 200px; left: 10px" class="navbar position-ab flex">
        <div style="margin-left: 14px">
          <!-- 标签1 -->
          <span ref="card_tag_1" class="card_tag">
            {{ cardDetail.tag_1 }}
          </span>
          <!-- 标签2 -->
          <span v-if="cardDetail.tag_2">~ </span>
          <span ref="card_tag_2" class="card_tag">
            {{ cardDetail.tag_2 }}
          </span>
        </div>
        <!-- 系列图标 -->
        <div ref="card_type_icon" class="type_icon">
          <img
            class="cost_img"
            :src="getImagePath(cardDetail.type_icon)"
            alt=""
          />
        </div>
      </div>
      <!-- 描述框 -->
      <div
        style="top: 234px; left: 18px"
        class="descBox position-ab position-re"
      >
        <!-- 内描述框 -->
        <div
          ref="card_desc"
          style="top: 2px; left: 2px"
          class="innerDesc rich position-ab"
        >
          {{ cardDetail.desc }}
        </div>
        <div
          ref="card_ad"
          class="position-ab card_ad"
          style="right: -4px; bottom: -12px"
        >
          <span ref="card_attack"> {{ cardDetail.attack }} </span>
          <span>/</span>
          <span ref="card_defense">
            {{ cardDetail.defense }}
          </span>
        </div>
        <div
          ref="card_level"
          :style="{
            right: '114px',
            bottom: '-9px',
            background: levelList[cardDetail.level],
          }"
          class="card_level position-ab"
        ></div>
      </div>
    </div>
  </div>
</template>
<script>
import { useListeners } from "vue";
export default {
  name: "magicCard",
  props: {
    cardDetail: {
      type: Object,
      default: () => {
        return {
          id: "001",
          name: "甲贺忍蛙",
          //费用
          cost: "red,blue,blue,green,blue,white,black",
          //标签
          tag_1: "水、恶",
          tag_2: "忍者宝可梦",
          //系列
          type_icon: "ninjia2",
          desc: "甲贺忍蛙的形态为双足大蛙，身体及双腿为深蓝色，胸部为黄色。四肢各有大白泡，腿上各有一个四角星型标记，看起来像手里剑。前肢有三指，后肢有两指，脚上有蹼。面孔下部和尖尖耳朵为浅黄色，眼睛上方有白斑，眼睛里有白巩膜、红虹膜和白瞳孔，围着颈子的粉红“围巾”是它的舌头。",
          attack: 2,
          defense: 1,
          level: 2,
          mainImg: "ex",
        };
      },
    },
  },
  data() {
    return {
      levelList: ["white", "green", "blue", "purple", "orange", "red"],
    };
  },
  computed: {
    costList() {
      //卡费
      let costArr = this.cardDetail.cost.split(",").sort((a, b) => {
        return this.sortElement(a) - this.sortElement(b);
      });
      return costArr;
    },
    backgroundStyle() {
      let mainImg = this.getImagePath(this.cardDetail.mainImg);
      let borderImg = this.getImagePath("border3");
      return {
        backgroundImage: `url(${mainImg})`,
        borderImage: `url(${borderImg})`,
        borderImageSlice: 30,
      };
    },
    navbarStyle() {
      let imgPath = this.getImagePath("navbar2");
      return {
        backgroundImage: `url(${imgPath})`,
      };
    },
  },
  mounted() {
    this.setInfo();
  },
  methods: {
    sortElement(type) {
      switch (type) {
        case "normal":
          return 0;
        case "red":
          return 1;
        case "blue":
          return 2;
        case "white":
          return 3;
        case "black":
          return 4;
        case "green":
          return 5;
      }
    },
    setInfo() {},
    getImagePath(cost) {
      switch (cost) {
        //费用
        case "red":
          return require(`./images/red.png`);
        case "blue":
          return require(`./images/blue.png`);
        case "green":
          return require(`./images/green.png`);
        case "black":
          return require(`./images/black.png`);
        case "white":
          return require(`./images/white.png`);
        // 系列图标
        case "ninjia":
          return require(`./images/ninjia.png`);
        case "ninjia2":
          return require(`./images/ninjia2.png`);
        //卡牌主图
        case "ex":
          return require(`./images/ex.png`);
        // 卡牌边框
        case "border1":
          return require(`./images/border1.png`);
        case "border2":
          return require(`./images/border2.png`);
        case "border3":
          return require(`./images/border3.png`);
        case "border4":
          return require(`./images/border4.png`);
        case "navbar1":
          return require(`./images/navbar1.png`);
        case "navbar2":
          return require(`./images/navbar2.png`);
        case "ad":
          return require(`./images/ad.png`);
      }
    },
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.card {
  width: 290px;
  height: 400px;
  background-color: #000000;
  border-radius: 6px;
  padding: 10px 10px 40px 10px;
}
.position-re {
  position: relative;
}
.position-ab {
  position: absolute;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.innerCard {
  width: 100%;
  height: 100%;
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border: 20px solid;
}
.navbar {
  background-image: url("./images/navbar2.png");
  width: 270px;
  height: 34px;
  background-size: contain;
  background-repeat: no-repeat;
}
/* 卡片描述 */
.descBox {
  height: 140px;
  width: 254px;
  background-color: rgba(207, 123, 109, 0.8);
}
.innerDesc {
  height: 135px;
  width: 250px;
  background-color: rgba(255, 255, 255, 0.5);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), #dc9c7f);
  border-radius: 2px;
  padding: 6px;
}
.rich {
  font-size: 12px;
  text-indent: 2em;
}
.card_name {
  margin-left: 14px;
  display: inline-block;
  height: 34px;
  line-height: 34px;
}
/* 费用图标 */
.card_cost,
.type_icon {
  display: inline-block;
  height: 34px;
  line-height: 34px;
  margin-right: 14px;
}
.cost_img {
  width: 20px;
  height: 20px;
  margin: 7px 0;
  display: inline-block;
}
.normal_icon {
  width: 20px; /* 根据实际图标大小设置 */
  height: 20px; /* 根据实际图标大小设置 */
  background-image: url("./images/normal.png"); /* 精灵图的路径 */
  background-size: 624%;
  background-repeat: no-repeat; /* 防止背景图像重复 */
  /* background-position: -100px 0;   */
  display: inline-block;
  margin: 7px 0;
}
.normal_icon_1 {
  background-position: -100px -2px;
}
.normal_icon_2 {
  background-position: -100px -24px;
}
.normal_icon_3 {
  background-position: -100px -47px;
}
.normal_icon_4 {
  background-position: -100px -70px;
}
.normal_icon_5 {
  background-position: -100px -92px;
}
.normal_icon_6 {
  background-position: -100px -115px;
}
.normal_icon_7 {
  background-position: -100px -138px;
}

.cost_red {
  background-image: url("/images/red.png");
}
.cost_blue {
  background-image: url(./images/blue.png);
}
.cost_white {
  background-image: url(./images/white.png);
}
.cost_green {
  background-image: url(./images/green.png);
}
.cost_black {
  background-image: url(./images/black.png);
}
/* 攻防 */
.card_ad {
  z-index: 10;
  width: 62px;
  height: 30px;
  background-image: url(./images/ad.png);
  background-size: contain;
  background-repeat: no-repeat;
  text-align: center;
  line-height: 30px;
}
/* 稀有度 */
.card_level {
  width: 40px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 50%;
  border: 2px solid #a66257;
  border-right-width: 4.5px;
  border-left-width: 4.5px;
  /* box-shadow: 0px -2px 0px #a66257; */
}
</style>
